<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<meta charset="utf-8">
<head th:include="blog/index/include_blog::header"></head>
<body class="user-select">
<header class="header">
    <nav th:include="blog/index/include_blog::nav" class="navbar navbar-default" id="navbar1"
         style="opacity: 0.9;z-index: 9999;"></nav>
</header>
<section class="container" id="articleList">
    <input id="cid" th:value="${id}"  type="hidden"/>
    <input id="type" th:value="${type}"  type="hidden"/>
    <div class="content-wrap">
        <div class="content">
            <div class="title">
                <h3 style="line-height: 1.3" th:text="${titleName}" id="titleName"></h3>
            </div>
            <article class="excerpt excerpt-1" v-for="item in articleList">
                <a class="focus" href="" :title="item.title" >
                    <img class="thumb" :src="item.images" alt="item.title"/>
                </a>
                <header>
                    <a class="cat" :href="['/blog/article/list/'+item.menuDO.menuId]" :title="item.menuDO.name">{{item.menuDO.name}}<i></i></a>
                    <h2><a :href="['/blog/detail?cid='+item.cid]" :title="item.title" >{{item.title}}</a></h2>
                </header>
                <p class="meta">
                    <time class="time"><i class="glyphicon glyphicon-time"></i> {{item.gtmCreate}}</time>
                    <span class="views"><i class="glyphicon glyphicon-eye-open"></i> {{item.hits}}</span>
                    <!--<a class="comment" href="" title="评论" ><i class="glyphicon glyphicon-comment"></i> 19</a>-->
                </p>
                <p class="note" v-text="item.description"></p>
                <a class="lookAll" :href="['/blog/detail?cid='+item.cid]" title="阅读全文">阅读全文</a>
            </article>
            <nav class="pagination" style="display: none;">
                <ul>

                </ul>
            </nav>
        </div>
    </div>
    <aside class="sidebar">
        <div th:include="blog/index/include_blog::aside"></div>
    </aside>
</section>
<div th:include="blog/index/include_blog::footer"></div>
<script type="text/javascript">
    var main = new Vue({
        el: '#articleList',
        mounted:function(){
            this.$nextTick(function () {
                this.createView();
            });
        },
        data: {
            articleList:[],
            cid:$('#cid').val(),
            type:$('#type').val(),
            titleName: $('#titleName').html(),
        },
        methods: {
            createView:function () {
                if(this.type == 'article'){
                    var data = {categories:this.cid, offset:0, limit:10, sort:'cid'};
                    this.$http.get('/blog/list',data).then(res=>{
                        if (res.status == 200){
                            this.articleList = res.data.rows;
                        }
                    });
                }else if(this.type == 'tag'){
                    var data = {tags:this.titleName,offset:0, limit:10, sort:'cid'};
                    this.$http.get('/blog/list',data).then(res=>{
                        if (res.status == 200){
                            this.articleList = res.data.rows;
                        }
                    });
                }
            }
        },
    });
</script>
</body>
</html>
